<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue v-on 事件传参</title>
  </head>

  <body>
    <div id="app">
      <h2>
        text here：
        <span>{{message}}</span>
      </h2>
      <!-- 无参数事件调用可以不写括号 -->
      <!-- <button v-on:click='action()'>点击</button> -->
      <button v-on:click="action">无参</button>

      <!-- 传参 $event-->
      <button @click="action2($event)">传$event</button>
      <!-- $event 可以不用写，事件内部默认能获取到$event -->
      <button @click="action22">省略$event</button>

      <!-- 传递自定义参数 -->
      <button @click="action3('传递的参数')">带自定义参</button>

      <!-- 传递自定义参数，并通过event控制dom节点表现-->
      <button title="123" data-uid="3369" @click="action4('传递的参数')">
        通过event反控制dom节点
      </button>

      <!-- 多事件处理，即一个按钮上绑定多个事件，这里无参的括号不能省略 -->
      <button @click="multi1(),multi2('这是批处理事件')">绑定多个事件</button>

      <h2>事件修饰符/按钮修饰符（这些没必要记，只记几个常用的就下了，剩下的到官网一搜就出来了）</h2>
      <div>
        <h3>e.prevent 阻止默认事件</h3>
        <ul>
          <li>一种是通过 event.preven</li>
        </ul>
        <a href="http://www.baidu.com" target="_blank" @click="afn1">百度链接</a>
        <a href="http://www.baidu.com" target="_blank" @click.prevent="afn2">百度链接</a>
      </div>
    </div>

    <script src="js/vue.js"></script>
    <script>
      const app = new Vue({
        el: "#app",
        data: {
          message: "this is a vue demo!",
        },
        computed: {},
        methods: {
          action: function () {
            this.message = "hello!";
            // console.log(event);          //每个事件内部默认都会有一个event对象，不管你在监听事件时传不传$event
            // console.log(window.event);   //保险起见，用window.event去调用这个对象
          },
          action2: function (event) {
            this.message = event;
            console.log(event);
            console.log(event === window.event); //window.event 和 event 是同一个对象
          },
          action22: function () {
            this.message = window.event;
            console.log(window.event);
          },
          action3: function (abc) {
            this.message = abc;
            console.log(abc);
          },
          action4: function (abc) {
            this.message = abc;
            console.log(abc);
            console.dir(event.srcElement); //指向当前事件发生的dom节点
            // 通过 event 可以反操作dom节点的表现，比如修改样式
            // 将按钮的背景颜色改为绿色
            event.srcElement.style.backgroundColor = "lightgreen";
            console.log(event.srcElement.dataset.uid); //dataset 对象包含了该dom节点上的自定义属性数据
            // event.preventDefault(); //阻止浏览器默认事件
            // event.stopPropagation();//阻止事件冒泡
          },
          multi1() {
            console.log("multi1");
          },
          multi2(atr) {
            console.log("multi2: " + atr);
          },
          afn1(){
            window.event.preventDefault();
            console.log('跳转行为被阻止了');
          },
          afn2(){
            console.log('跳转行为被阻止了');
          }
        },
      });
    </script>
  </body>
</html>
